import React,{useRef} from "react";
import { BrowserRouter as Router,HashRouter,NavLink, Route, Link,Switch, Prompt} from "react-router-dom";
import './app.scss';
function App(){
    function confirmation(res,callback){
        const allowTransition = window.confirm(res)
        callback(allowTransition);
    }
    const inputEl = useRef(null);
    function refCallback(){
     
    }
    return(
        // basename="/app" 
        <HashRouter getUserConfirmation={confirmation} hashType="hashbang">
            <div>
                <ul className="comm-nav flex">
                    <li className="flex-1"><Link to="/">Home</Link></li>
                    <li className="flex-1"><NavLink to="/about" activeClassName="c_409EFF" innerRef={refCallback}>About</NavLink></li>
                    <li className="flex-1"><Link to="/topics">Topics</Link></li>
                </ul>
                <div className="" ref={inputEl}>
                    这里是类容区域
                </div>
                <Switch>
                    <Route exact path="/" render={()=>{
                        return(
                            <>
                                <div>About 视图中Render函数的用法</div>
                                <About />
                            </>
                        )
                    }} />
                    <Route path="/ABOUT" sensitive={true} component={About} />
                    <Route path="/topics" component={Topics} />
                    <Route component={NoMatch} />
                </Switch>
            </div>
        </HashRouter>
    )
}
function NoMatch(){
    return (
        <div>这里是404页面</div>
    )
}
function Home(){
    return (
        <>
        <div>这里是Home页面</div>
        <Prompt message="Prompt的用法" />
        </>
    )
}
function About(props){
    // props.history.push("/topics")
    return (
        <div>这里是About页面</div>
    )
}
function Topics(){
    return (
        <div>这里是Topics页面</div>
    )
}

export default App;